<template>
    <el-drawer
      title="编辑面板"
      size="70%"
      :visible.sync="drawer"
      :direction="direction"
      :before-close="handleClose">
      <div class="fill-width-height" style="padding: 15px;">

        <el-row :gutter="20">
          <el-col :span="24" style="padding: 5px 0">
            <el-select v-model="itemObj.hometypeid" placeholder="请选择类型">
              <el-option
                v-for="item in typeList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-col>

          <el-col :span="24" style="padding: 5px 0"><el-input v-model="itemObj.title" placeholder="请输入标题"></el-input></el-col>
          <el-col :span="24" style="padding: 5px 0">
            <el-select v-model="itemObj.cardtype" placeholder="请选择面板类型">
              <el-option
                v-for="item in directionOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="24"  style="padding: 5px 0"><el-input v-model="itemObj.colspan" placeholder="请输入列数"></el-input></el-col>
          <el-col :span="24"  style="padding: 5px 0"><el-input v-model="itemObj.ordernum" placeholder="请输入顺序"></el-input></el-col>
        </el-row>
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="submit">提交</el-button>
      </div>
    </el-drawer>
</template>

<script>
import {save ,update} from "@/api/imgManage/homeManage";
import {directionOptions} from "@/views/imgManage/homeManage/homeHook";
import { getList as getTypeList } from '@/api/imgManage/imgType'

export default {
  props: {
    mode: {},
    item: {}
  },
  data(){
    return {
      drawer: false,
      isSuccess: false,
      direction: 'rtl',
      directionOptions: directionOptions,
      typeList: [],
      itemObj: {
        title: '',
        clickurl: '',
        cardtype: '',
        ordernum: '',
        colspan: 4
      }
    }
  },
  methods: {
    init(){
      if(this.mode === 'add'){
        this.itemObj = {}
      } else if(this.mode === 'view' || this.mode === 'edit'){
        this.itemObj = Object.assign({},this.item)
      }
    },
    async initTypeList() {
      let dataList = await getTypeList({ bustype: "home" }).then(res => res.data)
      this.typeList = dataList
    },
    handleOpen(){
      this.isSuccess = false
      this.drawer = true
      setTimeout(() => {
        this.init()
      },50)
    },
    handleClose(done) {
      done();
    },
    successCallBack(){
      this.$emit('callBack')
      this.isSuccess = true
      this.drawer = false
      this.$modal.msgSuccess("保存成功")
    },
    submit(){
      this.isSuccess = false
      if(this.mode === 'add'){
        save(this.itemObj).then(res => {
          this.successCallBack()
        })
      } else {
        update(this.itemObj).then(res => {
          this.successCallBack()
        })
      }
    }
  },
  mounted() {
    this.initTypeList()
  }
}
</script>

<style scoped lang="scss">

</style>
